<template>
  <div class="contain">
    <img src="@/assets/images/xiankuang.png" class="bgcClass" />
    <TopPart />
    <div class="boxClass">
      <div>
        <div>
          <div class="firstClass">{{ theFirst }}</div>
          <div>{{ title }}</div>
          <div v-if="type == 1" class="imgClass">
            <img src="@/assets/images/zuoyan.svg" />
            <div>请遮住左眼</div>
          </div>
          <div v-else class="imgClass">
            <img src="@/assets/images/youyan.svg" />
            <div>请遮住右眼</div>
          </div>
        </div>

        <div
          class="imgsClass"
          @keydown="handleKeyDown"
          tabindex="0"
          style="outline: none; cursor: pointer"
        >
          <img src="@/assets/images/ykq.svg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopPart from "@/components/TopPart";
import { mapGetters } from "vuex";
import { debounce } from "ant-design-vue/lib/vc-table/src/utils";
export default {
  components: {
    TopPart,
  },
  data() {
    return {
      title: "准备测试左眼",
      type: 1,
      timer: null, //定时器
      theFirst: "",
      synth: "",
      msg: "",
    };
  },
  computed: {
    ...mapGetters({
      testingData: "getTestingData",
      childList: "getChildList",
    }),
  },
  created() {},
  watch: {
    childList(v) {
      if (v) {
        console.log(111111111);
        this.getData();
      }
    },
  },
  mounted() {
    this.getData();
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    getData() {
      let index = Number(sessionStorage.getItem("currentIndex"));
      if (this.childList[index]) {
        this.theFirst = this.childList[index].nickName;
      }
      let that = this;
      let nowEye = sessionStorage.getItem("nowEye");
      if (nowEye == "left") {
        this.title = "准备测试左眼";
        this.type = 2;
      } else {
        this.title = "准备测试右眼";
        this.type = 1;
      }

      this.$el.getElementsByClassName("imgsClass")[0].focus();

      this.timer = setInterval(() => {
        this.$el.getElementsByClassName("imgsClass")[0].focus(); //获取焦点，不然遥控器容易失去控制
      }, 1000);

      if ("speechSynthesis" in window) {
        console.log("Web Speech API is supported.");
        this.synth = window.speechSynthesis; // 启用文本
        this.msg = new SpeechSynthesisUtterance();

        setTimeout(() => {
          if (nowEye == "left") {
            let nowIndex = sessionStorage.getItem("currentIndex");
            let nowStudentData = this.childList[nowIndex];
            that.handleSpeak(
              "请" +
                nowStudentData.nickName +
                "同学做好准备，请遮住右眼测试左眼"
            );
          } else {
            that.handleSpeak("开始测试右眼请遮住左眼");
          }
        }, 200);
      } else {
        console.log("Web Speech API is not supported.");
      }
    },
    handleSpeak(text) {
      this.msg.text = text; // 内容
      this.msg.lang = "zh-CN"; // 使用的语言:中文
      this.msg.volume = 1; // 声音音量：1
      this.msg.rate = 0.8; // 语速：1
      this.msg.pitch = 1; // 音高：1
      this.synth.speak(this.msg); // 播放
      console.log(123);
    },
    closeSpeak() {
      this.synth.cancel(); // 取消该次语音播放
    },
    goPage() {
      if (this.type == 1) {
        this.testingData.rightEye = null;
        this.$store.commit("setTestingData", this.testingData);
      } else {
        this.testingData.leftEye = null;
        this.$store.commit("setTestingData", this.testingData);
      }
      this.closeSpeak();
      this.$router.push("/VisionTest");
    },
    handleKeyDown: debounce(function (event) {
      console.log("event", event);
      switch (event.key) {
        case "Enter":
          // 看不清
          this.goPage();
          break;
        default:
          break;
      }
    }, 350),
  },
};
</script>

<style lang="less" scoped>
.contain {
  padding: 1% 2%;
  height: 100%; /* 至少为视口高度 */
  display: flex;
  flex-direction: column;
  .bgcClass {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .boxClass {
    flex: 1;
    background-color: #fff;
    border-radius: 0.06rem;
    /* box-shadow: 0px 0px 0.08rem 0.02rem #c9e4fa; */
    padding: 0.15rem 0 0.34rem;
    font-size: 0.2rem;
    color: #2070cf;
    font-weight: bold;
    position: relative;
    .firstClass {
      margin: 0.02rem 0 0.04rem;
      font-size: 0.22rem;
    }
    & > div:first-child {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      .imgClass {
        img {
          height: 1.1rem;
          width: 1.1rem;
          margin-top: 0.2rem;
          margin-bottom: 0.1rem;
        }
        color: #fc427b;
      }
      .btnClass {
        width: 70%;
        height: 0.36rem;
        font-size: 0.15rem;
        letter-spacing: 0.03rem;
        text-indent: 0.03rem;
        background-color: #348bfb;
        position: absolute;
        bottom: 0.3rem;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
    .imgsClass {
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 9999;
      bottom: 2%;
      img {
        width: 1.4rem;
        height: 1.4rem;
      }
    }
  }
}
</style>